<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ name: 'teacherxueke' }">学科</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="new-box">
            <el-button type="success"  @click="showDialog">新增学科</el-button>
            <el-table
                :data="xuekeList"
                style="width:100%;margin-top:20px"
                :row-class-name="tableRowClassName"
             >
                <el-table-column label="序号"  type="index">
                   
                </el-table-column>
                <el-table-column
                    label="学科名称"
                    prop="xkname"
                >
                </el-table-column>
                 <el-table-column
                    label="学科编号"
                >
                    <template slot-scope="scope">
                        <el-tag  effect="dark" type="success"> {{scope.row.xkid}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-popconfirm
                            confirmButtonText='好的'
                            cancelButtonText='不用了'
                            icon="el-icon-info"
                            iconColor="red"
                            title="这个操作很危险哦,真的要删除"
                            @onConfirm="deleteItem(scope.row._id)"
                            >
                            <el-button slot="reference" type="danger" size="small" >删除</el-button>
                         </el-popconfirm>
                    </template>
                 </el-table-column>
             </el-table>

            <el-dialog
            title="新增学科"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form
        :rules="rules"
        :model="form"
        ref="xuekeref"
        >
            <el-form-item label="学科名称"  prop="xkname">
                <el-input v-model="form.xkname" />
            </el-form-item>
            <el-form-item label="学科编号" prop="xkid" >
                <el-input  v-model="form.xkid"  />
            </el-form-item>
        </el-form>
        

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">暂不新增</el-button>
            <el-button type="primary" @click="addXueke">确 定</el-button>
        </span>
        </el-dialog>

        </div>
    </div>
</template>



<script>
export default {
    data(){
        return {
            xuekeList:[],
            dialogVisible:false,
            form:{},
            rules:{
                xkname:[
                     {required:true,message:"请添加学科name",trigger:'blur'},
                ],
                xkid:[
                    {required:true,message:"请添加学科id",trigger:'blur'},
                ]
            }
        }
    },
     methods:{
          tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 == 0) {
            return 'warning-row';
            } else   {
            return 'success-row';
            }
            return '';
        },

        deleteItem(_id){
            this.$axios.post("/vue/delxueke",{
                _id
            }).then(res=>{
                if(res.data.type){
                    this.xuekeList = this.xuekeList.filter(item=>item._id!==_id);
                }
            })
        },
        showDialog(){
            this.dialogVisible = true;
        },
        handleClose(){
            this.dialogVisible = false;
        },
        addXueke(){
            this.$refs.xuekeref.validate(valid=>{
                if(valid){
                    this.$axios.post("/vue/addxueke",this.form)
                    .then(res=>{
                        if(res.data.type){
                            this.dialogVisible = false;
                            this.xuekeList = [this.form,...this.xuekeList];
                            this.form = {};
                            // this.$nextTick(()=>{
                            //     setTimeout(()=>{
                            //         this.$refs.xuekeref.resetFields();
                            //     },100)
                            // })
                        }
                    })
                }else{
                    this.$message.error("请先完善所有信息再提交...")
                }
            })
        }
    },
    mounted(){
        this.$axios.post("/vue/getxueke")
        .then(res=>{
            this.xuekeList = res.data.result;
        })
    }
}
</script>